<template>
  <div class="sdy-goods-list">
    <SdyHeader title="啥都有 ~ 商品列表" back></SdyHeader>
    <van-card
    @click='goToDetail(item.proid)'
    v-for="item in goodsList"
      num="2"
      :price="item.originprice"
      :desc="item.desc"
      :title="item.proname"
      :thumb="item.img1">
        <template #footer>
          <van-button size="mini" type='danger' @click='addCart(item.proid,$event)'>加入购物车</van-button>
        </template>
    </van-card>
  </div>
</template>

<script setup lang="ts">
// 只要来过这个页面, 就相当于进入了一次搜索
// 就需要拿到带过来的信息, 存储在 localStorage 内
import { useRoute,useRouter , type RouteLocationNormalizedLoaded,type Router } from 'vue-router'
import { onMounted, ref } from 'vue'
import {searchListApi} from '@/api/goods'
import type {MyHotItem} from '@/config/interface'
import {addCartApi} from '@/api/cart'
import {Toast} from 'vant'

const $route: RouteLocationNormalizedLoaded = useRoute()
const $router: Router = useRouter()
// 准备一个函数, 拿到搜索带过来的信息存储在 localStorage 内
const setLocalStorage = (text: string): void => {
  const historyList: string[] = JSON.parse(window.localStorage.getItem('history') as string) || []
  // 把 text 追加到数组内, 然后重新存储回 localStorage 内
  // 如果历史记录内有和这个信息了, 不需要插入了

  // const res: boolean = historyList.indexOf(text) === -1
  // res === true 说明没有, 需要存储
  // if (res) {
    // 存储的逻辑
  // }
  // 代码来到这里, 是什么都不做的操作

  // const res: boolean = historyList.indexOf(text) !== -1
  // res === true 说明 有
  // 什么都不做
  // if (res) return
  // 有的逻辑

  const res: boolean = historyList.indexOf(text) !== -1

  if (res) return

  // 代码来到这里, 说明历史记录内没有记录过该信息
  historyList.push(text)

  // 再次把最新的数组存储到 localStorage 内
  window.localStorage.setItem('history', JSON.stringify(historyList))
}

//1.根据关键字请求当前页面数据
// 需要用到携带过来的数据
//准备一个数据表示第几页
const count = ref<number>(1)
//准备一个数组 表示页面渲染数组
const goodsList = ref<MyHotItem[]>([])
const getGoodsList = async (text:string)=>{
  const res = await searchListApi(text,count.value)
  goodsList.value = res.data
  // console.log(res.data)
}

//跳转详情页
const goToDetail = (id: string)=>{
  // console.log(`查看商品id为${id}的商品信息`)
  // 携带参数直接跳转
  $router.push({path: "detail",query:{proid:id }})
} 
//加入购物车
const addCart = async (id: string,$event:any)=>{
  console.log(`查看商品id为${id}加入购物车`)
  //阻止事件穿透
  $event.stopPropagation();
  //根据id请求进口数据，加入购物车
  const user_id  = window.localStorage.getItem("user_id")
  const token = window.localStorage.getItem('token')
  if(!user_id || !token){
    // 非空验证
    Toast({
      message:'你还没有登录'
    })
    return
  }
  const res =  await addCartApi(user_id,id)
  console.log(res)
  if(res.code === '200')Toast({message:'加入购物车成功'})
}

onMounted(() => {
  const searchText = $route.query.search
  searchText && setLocalStorage(searchText as string)
  searchText && getGoodsList(searchText as string)
  
})
</script>

<style scoped lang="scss">
.sdy-goods-list{
  height:100%;
  overflow: auto;
}
</style>
